<template>
    <div class="box">
        <heads title="分类"></heads>
        <div class="main">
            <van-row>
                <van-col span="6" style="height: 100%;overflow: auto;">
                    <van-sidebar v-model="active">
                        <van-sidebar-item :title="v.cat_name" v-for="(v, i) in listdata" :key="i" />
                    </van-sidebar>
                </van-col>

                <van-col span="17" style="height: 100%;overflow: auto;">
                    <van-search v-model="title" placeholder="请输入搜索关键词" />
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <div class="" v-for="(v, i) in listdata[active]?.children" :key="i">
                            <p>{{ v.cat_name }}</p>

                            <van-grid :border="false" :column-num="3">
                                <van-grid-item v-for="(val, index) in v.children" :key="index" @click="ww()">
                                    <van-image
                                        :src="val.cat_icon ? val.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                                    <p>{{ val.cat_name }}</p>
                                </van-grid-item>

                            </van-grid>

                        </div>
                    </van-pull-refresh>
                </van-col>
            </van-row>
        </div>
    </div>

</template>

<script setup>
import { ref, watch } from "vue"
import { showToast } from 'vant';
const active = ref(0);
import heads from '@/components/head.vue';
import { categoriesApi } from "@/api/api"

let listdata = ref('')
const bb = () => {
    categoriesApi().then(res => {
        listdata.value = res.data.message
    })
}
bb()

const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        bb()
    }, 1000);
};

import _ from "lodash"
let title = ref('')
watch(title, _.debounce((newValue, oldValue) => {
    bb()
}, 1000))

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const ww=(name)=>{
    router.push({path:'/search',query:{name:name}})
}
</script>

<style lang="scss" scoped>
.box
{
    display: flex;
    overflow: hidden;
    flex-direction: column;
    .main
    {
        overflow: hidden;
        flex: 1;
        display: flex;
    }
}

</style>